<template>
    <div>
        <el-dialog title="方案信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" :modal="false">
            <span>
                <el-form ref="form" :model="form" label-width="80px" :rules="rules">
                    <el-form-item label="方案名称">
                        <el-input v-model="form.reportName"></el-input>
                    </el-form-item>
                    <el-form-item label="业务分类">
                        <el-select v-model="form.reportType" placeholder="请选择业务">
                            <el-option v-for="(item, i) in yewuData" :key="i" :label="item.name"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属任务">
                        <el-select v-model="form.reportTaskId" placeholder="请选择任务">
                            <el-option v-for="(item, i) in renwuData" :key="i" :label="item.reportTaskName"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="描述信息">
                        <el-input type="textarea" v-model="form.reportDesc"></el-input>
                    </el-form-item>
                    <el-form-item label="屏幕数量">
                        <el-radio-group v-model="form.screenSize" size="medium">
                            <el-radio border :label="1">单屏</el-radio>
                            <el-radio border :label="2">双屏</el-radio>
                            <el-radio border :label="3">三屏</el-radio>
                        </el-radio-group>
                        {{ form.screenSize }}
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">确定</el-button>
                        <el-button @click="handleClose">取消</el-button>
                    </el-form-item>
                </el-form>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { getRwList, addScreenList, updateScreenList } from '@/api/newApi/screenPart';
export default {
    data() {
        return {
            dialogVisible: false,
            //  表单
            form: {
                id: "",
                reportName: "",
                reportGroupId: null,  // 左侧树id
                reportTaskId: "", // 任务
                reportDesc: "",  // 描述
                reportType: 'report_screen',
                reportImage: "",
                screenSize: 1
            },
            rules: {
                name: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                yewu: [
                    { required: true, message: '请选择业务', trigger: 'change' }
                ],
                renwu: [
                    { required: true, message: '请选择任务', trigger: 'change' }
                ],
                message: [
                    { required: true, message: '请填写描述信息', trigger: 'blur' }
                ]
            },
            // 业务数据
            yewuData: [
                {
                    id: "report_screen",
                    name: "report_screen",
                },
            ],
            // 任务数据
            renwuData: [],
            isUpdate: false,
        };
    },
    mounted() {
        this.getRw()
    },
    methods: {
        // 获取任务数据
        async getRw() {
            let res = await getRwList()
            this.renwuData = res.data
        },
        handleClose() {
            let _self = this
            this.$confirm("确认关闭？")
                .then(() => {
                    _self.dialogVisible = false
                })
                .catch(() => { });
        },
        async onSubmit() {
            let res
            if (this.isUpdate) {
                res = await updateScreenList(this.form)
            } else {
                res = await addScreenList(this.form)
            }
            if (res.code == "200") {
                this.$message({
                    message: "请求成功",
                    type: "success"
                })
                this.$emit("fromcomfirm", {
                    page: 1,
                    size: 10,
                })
            } else {
                this.$message({
                    message: "请求失败",
                    type: "error"
                })
            }
            // 清空参数
            this.form = {
                id: "",
                reportName: "",
                reportGroupId: "",
                reportTaskId: "",
                reportDesc: "",
                reportType: 'report_screen',
                reportImage: "",
            }
            this.isUpdate = false
            this.dialogVisible = false
        }
    },
};
</script>
<style lang="scss"></style>
